<template>
    <div class="marquee-wrapper" :style="{ width: realWidth  }">
      <div
        class="marquee-container"
        :style="{ height: realHeight  }"
        :class="className"
      >
        <ul
          ref="marqueeCon"
          :id="tooltipId"
          class="marquee-content"
          :class="{ anim: animate === true }"
          @mouseenter="handleStop()"
          @mouseleave="handleUp()"
        >
          <li
            v-for="(item, index) in realData"
            :key="`${tooltipId}-${item.id}-${index}`"
            class="marquee-item"
            :style="{ height: itemHeigth + 'vw' }"
            @click="handleClick(item)"
          >
            <slot name="itemCon" :item="item" :index="index"></slot>
          </li>
        </ul>
      </div>
    </div>
  </template>
  <script>
  function parseToNum (value) {
    if (value !== undefined) {
      value = parseInt(value, 10)
      if (isNaN(value)) {
        value = null
      }
    }
    return value
  }
  function generateId () {
    return Math.floor(Math.random() * 10000)
  }
  export default {
    name: 'so-marquee',
    props: {
      /*
       * 可接受传参
       * data          列表数据
       * className     自定义类名
       * width         列表宽度，默认值：400
       * height        列表高度,默认值：200
       * showNumber    可视的条目数，默认值：5
       * speed         轮播速度，默认值：1000
       * */
      // 列表数据
      data: {
        type: Array,
        default: () => []
      },
      // 自定义类名
      className: String,
      // 列表宽度，默认值：400
      width: {
        type: [Number, String],
        default: '200px'
      },
      // 列表高度,默认值：200
      height: {
        type: [Number, String],
        default: '200px'
      },
      // 可视的条目数，默认值：5
      showNumber: {
        type: [Number, String],
        default: 5
      },
      toLeft: {
        type: Boolean,
        default: false
      },
      // 轮播速度，默认值：1000
      speed: {
        type: [Number, String],
        default: 1000
      }
    },
    data () {
      return {
        intnum: undefined,
        animate: false
      }
    },
    computed: {
      tooltipId () {
        return `marquee-con-${generateId()}`
      },
      realWidth () {
        return this.width
      },
      realHeight () {
        return this.height
      },
      realShowNumber () {
        return parseToNum(this.showNumber)
      },
      realSpeed () {
        return parseToNum(this.speed) < 1000 ? 1000 : parseToNum(this.speed)
      },
      itemHeigth () {
        return parseToNum(this.realHeight) / this.realShowNumber
      },
      realData () {
        return JSON.parse(JSON.stringify(this.data))
      }
    },
    mounted () {
      if (this.realData.length > this.realShowNumber) {
        this.scrollUp()
      }
    },
    methods: {
      scrollUp () {
        // eslint-disable-next-line no-unused-vars
        this.intnum = setInterval(_ => {
          this.animate = true
          setTimeout(() => {
            this.realData.push(this.realData[0]) // 将数组的第一个元素添加到数组的
            this.realData.shift() // 删除数组的第一个元素
            this.animate = false // margin-top 为0 的时候取消过渡动画，实现无缝滚动
          }, this.realSpeed / 2)
          // this.$once('hook:beforeDestroy', () => {
          //   this.cleanup()
          // })
        }, this.realSpeed)
      },
      handleStop () {
        this.cleanup()
      },
      handleUp () {
        this.scrollUp()
      },
      handleClick (row) {
        this.$emit('handleClick', row)
      },
      cleanup () {
        if (this.intnum) {
          clearInterval(this.intnum)
          this.intnum = null
        }
      }
    },
    beforeDestroy () {
      this.cleanup()
    },
    deactivated () {
      this.cleanup()
    },
    watch: {
      animate (flag) {
        this.marqueeCon = this.$refs.marqueeCon
        if (flag) {
          this.marqueeCon.style.marginTop = `-${this.itemHeigth}vw`
          if (this.toLeft) {
            this.marqueeCon.style.marginLeft = '-20px'
          }
        } else {
          if (this.toLeft) {
            this.marqueeCon.style.marginLeft = 0
          }
          this.marqueeCon.style.marginTop = 0
        }
      }
    }
  }
  </script>
  <style scoped lang="scss">
  .marquee-container {
    overflow: hidden;
  }
  
  .marquee-content {
    position: relative;
  }
  
  .anim {
    transition: all 0.5s;
  }
  
  .marquee-item {
    display: flex;
    align-items: center;
    // justify-content: space-around;
  }
  ul,li{
    margin: 0;
    padding: 0;
    width:100%;
  }
  </style>
  